// //deprecated !!!! 2022-8-10 use DialogLarge
// import React , {useState,useEffect} from 'react'


// import "./DialogPickProducts.css" ;


// // props.loginedUser
// function DialogPickProducts(props) {
//     const [open, setOpen] = useState(false);
//     const [currTabIndex, setCurrTabIndex] = useState(0);
//     const [pickedPdt, setPickedPdt] = useState(null) ;
//     const [categories, setCategories] = useState([]);
//     const [userScriptList, setUserScriptList] = useState([]) ;

//     //从服务器获取分组产品列表
//     const getAndSetCategoryProductsFunc = async function () {
//         const api = global.g_serverAPIRoot + 'product/categories' ;
//         const res = await fetch(api) ;
//         const resjson = await res.json() ;

//         if( typeof resjson.data !=='undefined' ){
//             let newCatArr = [...resjson.data] ;
//             newCatArr.push({
//                 catid:99999,
//                 catname:'我的脚本',
//                 visible:1,
//                 iorder:99999,
//                 products:[]
//             }) ;
//             setCategories(newCatArr) ;
//             setCurrTabIndex(0);
//             httpGetUserScripts() ;
//         }
//     }

//     //从服务器加载用户脚本，然后更新categories状态，UI更新交给React内部机制
//     const httpGetUserScripts =async function() {
//         //http://192.168.56.103:15900/pe/scripts/userlist?uid=1
//         const api = global.g_serverAPIRoot + 'scripts/userlist?uid='+props.loginedUser.uid ;
//         const res = await fetch(api) ;
//         const resjson = await res.json() ;

//         if( typeof resjson.data !=='undefined' ){
//             let data2 = [... resjson.data] ;
//             for(let i = 0 ; i<data2.length;++i){
//                 data2[i].productDisplay = {} ;
//                 data2[i].productDisplay.sid = data2[i].sid ;
// 				data2[i].productDisplay.type = "us" ;
// 				data2[i].productDisplay.productname= data2[i].title ;
// 				data2[i].productDisplay.subtitle =   data2[i].utime ;
//                 data2[i].productDisplay.params = '{"sid":'+ data2[i].sid+'}' ;
//             }
//             setUserScriptList(data2) ;
//         }
//     }

   
//     useEffect(() => {
//         if( props.isOpen===true ){
//             getAndSetCategoryProductsFunc() ;
//         }
//         setOpen(props.isOpen)
//         return () => {
//         }
//     }, [props.isOpen])

//     //点击分类分组标签
//     const onDialogContentTabCellClicked = function (ev) {
//         let newindex = parseInt(ev.target.getAttribute('dataid')) ;
//         if( newindex === currTabIndex ){
//             //skip
//         }else{
//             setPickedPdt(null);
//             setCurrTabIndex( newindex );
//         }
//     }

//     //点击产品标签
//     const onDialogContentTabContentCellProductClicked = function(obj){      
//         setPickedPdt(obj);
//     }

//     //点击确定按钮，回调App的相应函数
//     const onOkClickedCallback = function () {
//         props.onOk(pickedPdt);
//     }


//     //点击新建脚本按钮2022-5-10
//     const onNewScriptClicked = function() {
//         const formData = new FormData();
//         formData.append('uid' , props.loginedUser.uid) ;
//         formData.append('script', "function main(){return null;}"); 
//         const url = global.g_serverAPIRoot + "scripts/new2"
//         fetch(
//             url,
//             {
//                 method: 'POST',
//                 body: formData,
//             }
//         )
//         .then((response) => response.json())
//         .then((result) => {
//             if( result.state===0 ){
//                 //good
//                 httpGetUserScripts() ;
//             }else{
//                 //bad
//             }
//         }).catch(err=> {
//             console.log(err) ;// 505 404 ... errors
//         }) ;
//     }


//     //用户脚本单元格删除
//     const onDeleteUserScriptClick = function(sid) {
//         const formData = new FormData();
//         formData.append('sid' ,sid) ;
//         const url = global.g_serverAPIRoot + "scripts/delete"
//         fetch(
//             url,
//             {
//                 method: 'POST',
//                 body: formData,
//             }
//         )
//         .then((response) => response.json())
//         .then((result) => {
//             if( result.state===0 ){
//                 //good
//                 httpGetUserScripts() ;
//             }else{
//                 //bad
//             }
//         }).catch(err=> {
//             console.log(err) ;// 505 404 ... errors
//         }) ;
//     }

    

//     return (
//         <Modal
//             // onClose={() => setOpen(false)}
//             // onOpen={() => setOpen(true)}  //注释这个可以避免点击对话框外边注销对话框
//             open={open}
//             >
//             <div><span className='DialogTitleSlash'></span>添加图层</div>
//             <div className="DialogSearchContainer">

//             </div>

//             <div  className="DialogContent">
//                 <div className="DialogContentTabContainer">
//                     {
//                         categories.map( (cat,index) => (
//                                 <div
//                                 key={index}
//                                 dataid={index}
//                                 className={(index===currTabIndex)?'DialogContentTabCell Active':'DialogContentTabCell'} 
//                                 onClick={onDialogContentTabCellClicked}>{cat.catname}</div>
//                             )
//                         ) 
//                     }
//                 </div>
//                 <div className="DialogContentTabContent">
//                     {
//                         (categories[currTabIndex]!==undefined 
//                             && categories[currTabIndex].catid===99999 )?(
//                             <div style={{margin:'8px'}}>
//                                 <Button size='mini'
//                                  basic color='green'
//                                   onClick={onNewScriptClicked}>新建脚本</Button>
//                             </div>
//                         ):""
//                     }
//                     {
//                         (categories[currTabIndex]!==undefined
//                             && categories[currTabIndex].catid!==99999
//                             )?(
//                             categories[currTabIndex].products.map( (pdt,index) => (
//                                 <div
//                                 key={'key'+index}  
//                                 dataid={index} 
//                                 datacatid={categories[currTabIndex].catid} 
//                                 onClick={()=>onDialogContentTabContentCellProductClicked(pdt)}
//                                 className={(pdt===pickedPdt)?'DialogContentTabContentCellProduct Active':'DialogContentTabContentCellProduct'} >
//                                     <h3 onClick={()=>onDialogContentTabContentCellProductClicked(pdt)}>{pdt.productDisplay.productname}</h3>
//                                     <h4 onClick={()=>onDialogContentTabContentCellProductClicked(pdt)}>{pdt.productDisplay.subtitle}</h4>
//                                     <img src='images/info.png' />
//                                     {
//                                         (pdt===pickedPdt)?<img src='images/check.png' />:""
//                                     }
                                    
//                                 </div>
//                             ))
//                         ):""
//                     }
//                     {
//                         (categories[currTabIndex]!==undefined
//                             && categories[currTabIndex].catid===99999
//                             )?(
//                             userScriptList.map( (scitem,index) => (
//                                 <div 
//                                 key={'key'+index}  
//                                 dataid={index} 
//                                 datacatid={categories[currTabIndex].catid} 
//                                 onClick={()=>onDialogContentTabContentCellProductClicked(scitem)}
//                                 className={(scitem===pickedPdt)?'DialogContentTabContentCellProduct Active':'DialogContentTabContentCellProduct'} >
//                                     <h3 onClick={()=>onDialogContentTabContentCellProductClicked(scitem)}>{scitem.title}</h3>
//                                     <h4 onClick={()=>onDialogContentTabContentCellProductClicked(scitem)}>更新时间:{scitem.utime}</h4>
//                                     <img src='images/info.png' />
//                                     {
//                                         (scitem===pickedPdt)?<img src='images/check.png' />:""
//                                     }
//                                     <Button color='red' size='mini' basic 
//                                     onClick={()=>onDeleteUserScriptClick(scitem.sid)}>删除</Button>
//                                 </div>
//                             ))
//                         ):""
//                     }
//                 </div>
//             </div>            
            
//             <div className="DialogFooter">
//                 <Button style={{float:'left'}} compact={true}  >帮助</Button>
//                 <Button style={{float:'right'}} compact={true} onClick={props.onCancel} >取消</Button>
//                 <Button style={{float:'right'}} compact={true} primary={true} onClick={onOkClickedCallback}>确定</Button>
//                 <div style={{clear:'both'}}></div>
//             </div>
//         </Modal>
//     )
// }




// export default DialogPickProducts
